// ------------------------------------------------------------
// This is the css for the main site menu
// ------------------------------------------------------------

//This menu CSS is modification of http://cssmenumaker.com/menu/responsive-flat-menu and http://www.thesmackdownhotel.com/

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button
  margin: 0
  padding: 0
  border: 0
  list-style: none
  line-height: 1
  display: block
  position: relative
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

#cssmenu:after, #cssmenu > ul:after
  content: "."
  display: block
  clear: both
  visibility: hidden
  line-height: 0
  height: 0

#cssmenu #menu-button
  display: none

#cssmenu
  background: #171717
  position: fixed
  width: 100%
  z-index: 300

  //added by hamish

#cssmenu > ul > li
  margin: 0
  padding: 0 1px 0 0
  float: left
  display: block
  background: url(../images/mainnav-sep-2.gif) repeat-y right
  cursor: pointer

#cssmenu.align-center > ul
  font-size: 0
  text-align: center

#cssmenu.align-center > ul > li
  display: inline-block
  float: none

#cssmenu.align-center ul ul
  text-align: left

#cssmenu.align-right > ul > li
  float: right

#cssmenu > ul > li > a
  display: block
  text-decoration: none
  font-weight: bold
  text-transform: uppercase
  color: #DDDDDD
  padding: 13px 16px
  font-size: 13px

#cssmenu > ul > li > a > span

#cssmenu > ul > li:hover > a, #cssmenu > ul > li:focus > a, #cssmenu > ul > li:active > a
  background-color: #232323
  color: #FFFFFF

#cssmenu ul > li.active > a, #cssmenu ul > li.active > a:hover, #cssmenu ul > li.active > a:active, #cssmenu ul > li.active > a:focus
  background-color: #C00000
  color: #FFFFFF

#cssmenu ul ul
  position: absolute
  left: -9999px
  border: 0 solid #232323
  background: #232323
  width: 14em

#cssmenu ul ul ul
  border: 1px solid #232323

#cssmenu.align-right ul ul
  text-align: right

#cssmenu ul ul li
  height: 0
  -webkit-transition: all .25s ease
  -moz-transition: all .25s ease
  -ms-transition: all .25s ease
  -o-transition: all .25s ease
  transition: all .25s ease
  border-bottom: 1px solid #1D1D1D
  border-top: 1px solid #404040
  border-right: none

#cssmenu li:hover > ul
  left: auto

#cssmenu.align-right li:hover > ul
  left: auto
  right: 0

#cssmenu li:hover > ul > li
  height: 28px

#cssmenu ul ul ul
  margin-left: 100%
  top: 0

#cssmenu.align-right ul ul ul
  margin-left: 0
  margin-right: 100%

#cssmenu ul ul li a
  border-right: none
  height: 28px
  margin: 0
  padding: 5px 8px
  background-color: #232323
  text-transform: none
  font-weight: normal
  white-space: nowrap
  height: auto
  line-height: normal
  color: #ddd
  font-size: 13px

#cssmenu ul ul li a span

#cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a
  border-bottom: 0

#cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover, #cssmenu ul ul li a:focus, #cssmenu ul ul li a:active
  background: #404040
  color: #FFFFFF !important
  text-decoration: none

#cssmenu ul ul li a.active
  color: #FFFFFF !important
  font-weight: bold !important

@media only screen and (max-width: 1024px)
  #cssmenu > ul > li > a
    font-size: 9.8px
    font-size: 1.27vw
    padding-left: 13px
    padding-right: 13px

  #cssmenu li:hover > ul > li
    height: 25px

  #cssmenu ul ul li a
    font-size: 9.8px
    font-size: 1.27vw
    height: 25px

@media only screen and (min-width: 768px)
  #cssmenu .menu-opened ul
    display: block !important

  #cssmenu ul ul ul
    display: none !important

@media all and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px)
  #cssmenu
    width: 100%

  #cssmenu ul
    width: 100%
    display: none

  #cssmenu.align-center > ul
    text-align: left

  #cssmenu ul li
    width: 100%
    border-top: 1px solid rgba(120, 120, 120, 0.2)

  #cssmenu ul ul li, #cssmenu li:hover > ul > li
    height: auto

  #cssmenu ul li a, #cssmenu ul ul li a
    width: 100%
    border-bottom: 0

  #cssmenu > ul > li
    float: none

  #cssmenu > ul > li > a
    padding: 13px 25px
    font-size: 13px

    /*border-bottom: 2px #C00000 solid;

  #cssmenu ul ul li a
    padding-left: 32px

  #cssmenu ul ul ul li a
    padding-left: 39px

  #cssmenu ul ul li a
    color: #dddddd
    font-size: 13px

  #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a
    color: #ffffff

  #cssmenu ul ul, #cssmenu ul ul ul, #cssmenu.align-right ul ul
    position: relative
    left: 0
    width: 100%
    margin: 0
    text-align: left
    display: none

  #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before
    display: none

  #cssmenu #menu-button
    display: block
    padding: 13px 17px
    color: #dddddd
    cursor: pointer
    font-size: 13px
    text-transform: uppercase
    font-weight: 700

  #cssmenu #menu-button:after
    position: absolute
    top: 20px
    right: 17px
    display: block
    height: 4px
    width: 20px
    border-top: 2px solid #dddddd
    border-bottom: 2px solid #dddddd
    content: ''

  #cssmenu #menu-button:before
    position: absolute
    top: 14px
    right: 17px
    display: block
    height: 2px
    width: 20px
    background: #dddddd
    content: ''

  #cssmenu .submenu-button
    position: absolute
    z-index: 99
    right: 0
    top: 0
    display: block
    border-left: 1px solid rgba(120, 120, 120, 0.2)
    height: 39px
    width: 46px
    cursor: pointer

  #cssmenu .submenu-button.submenu-opened

  #cssmenu ul ul .submenu-button
    height: 26px
    width: 34px

  #cssmenu .submenu-button:after
    position: absolute
    top: 22px
    right: 19px
    width: 8px
    height: 2px
    display: block
    background: #dddddd
    content: ''

  #cssmenu ul ul .submenu-button:after
    top: 15px
    right: 13px

  #cssmenu .submenu-button.submenu-opened:after
    background: #ffffff

  #cssmenu .submenu-button:before
    position: absolute
    top: 19px
    right: 22px
    display: block
    width: 2px
    height: 8px
    background: #dddddd
    content: ''

  #cssmenu ul ul .submenu-button:before
    top: 12px
    right: 16px

  #cssmenu .submenu-button.submenu-opened:before
    display: none
